<template>
  <div>
    <a-button type="primary" @click="modalVisible = true" style="margin-bottom:16px;">变更搭配师</a-button>
    <ListModal
      :filter="filter"
      :speReasonList="[]"
      :blackReasonList="[]"
      :modalVisible="modalVisible"
      :selectedRows="selectedRowKeys"
      :modalType="'swap'"
      @closeModal="closeModal"
      @refreshList="refreshList"
    ></ListModal>
    <s-table ref="table" size="default" :rowKey="record => record.id" :columns="columns" :data="loadData" :pagination="paginationProps">
      <span slot="createTime" slot-scope="text">{{ text | utc2beijing }}</span>
    </s-table>
  </div>
</template>
<script>
import { STable } from '../../../components'
import ListModal from '../modules/ListModal'
import { getFashioners, getFashionerRecord } from '@/api/box/member'
import { selectById } from '@/api/box/api'
const columns = [
  {
    title: '变更时间',
    dataIndex: 'createTime',
    scopedSlots: { customRender: 'createTime' }
  },
  {
    title: '现搭配师',
    dataIndex: 'fashionerName',
    align: 'center'
  },
  {
    title: '原搭配师',
    dataIndex: 'originFashionerName',
    align: 'center'
  },
  {
    title: '变更理由',
    dataIndex: 'memo',
    align: 'center'
  },
  {
    title: '操作人',
    dataIndex: 'modifyName'
  }
]
export default {
  components: {
    STable,
    ListModal
  },
  data() {
    this.columns = columns
    return {
      filter: {},
      modalVisible: false,
      selectedRowKeys: [],
      unionId: '',
      paginationProps: {
        total: 0,
        showTotal: total => `共有 ${total} 条数据`
      },
      loadData: parameter => this.fetchData(parameter)
    }
  },
  created() {
    this.unionId = this.$route.params.id
    this.fetchUserInfo()
    this.fetchFashioners()
  },
  beforeRouteLeave(to, from, next) {
    this.$destroy()
    next()
  },
  methods: {
    fetchFashioners() {
      getFashioners().then(res => {
        if (res.code == 0) {
          this.filter.fashioner = res.data
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    // 获取用户信息
    fetchUserInfo() {
      selectById(this.unionId, '').then(res => {
        if (res.code == 0) {
          this.selectedRowKeys = [res.data.details.id]
        } else {
          this.$message.warning(res.msg)
        }
      })
    },
    // loadData
    fetchData(parameter) {
      let data = {
        page: parameter,
        requestData: {
          unionId: this.unionId
        }
      }
      return getFashionerRecord(data).then(res => {
        if (res.code == 0) {
          return {
            data: res.data,
            page: res.page
          }
        } else {
          return {
            data: [],
            page: {
              pageNo: 0,
              count: 0,
              pageSize: 10
            }
          }
        }
      })
    },
    handleOk(e) {
      console.log(e)
      this.$refs.rulesForm.validate(valid => {
        if (valid) {
          this.$refs.rulesForm.resetFields()
          this.visible = false
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    closeModal(value) {
      if (value) {
        this.modalVisible = false
        this.modalType = ''
      }
    },
    refreshList() {
      this.selectedRowKeys = []
      this.$refs.table.refresh()
    }
  }
}
</script>
<style lang="less" scoped>
.hidden-label {
  /deep/ .ant-form-item-label {
    visibility: hidden;
  }
}
</style>

